<script>
import { selectTeacherOptions } from '@/api/authApi'
import { weeks } from '@/constant'
import courseRules from '@/rules/courseRules'
import { updataCourseList } from '@/api/admin/course'
export default {
  props: ['modelValue'],
  emits: ['update:modelValue'],
  components: {},
  data() {
    return {
      weeks,
      courseRules,
      teachers: [],
      params: {
        teacher_name: '',
      },
      courseData: {
        course_name: '',
        course_teacher_id: '1',
        course_grade: '',
        course_time: '',
        course_location: '',
        course_credit: '',
        course_max_size: '',
        course_exam_date: '',
        course_exam_location: '',
      },
      courseTime: {
        week: '',
        start: '',
        end: '',
      },
    }
  },
  watch: {
    courseTime: {
      handler(nv) {
        this.courseData.course_time = `${nv.week ?? ''}-${nv.start ?? ''}-${nv.end ?? ''}`
      },
      deep: true,
    },
  },
  computed: {
    flag: {
      get() {
        return this.modelValue
      },
      set(val) {
        this.$emit('update:modelValue', val)
      },
    },
  },
  methods: {
    async initTeacherOptions() {
      this.teachers = await selectTeacherOptions(this.params)
    },
    remoteMethod(key) {
      this.params.teacher_name = key
      this.initTeacherOptions()
    },
    async addNewCourse() {
      await this.$refs.from.validate()
      await updataCourseList(this.courseData)
      this.flag = false
    },
  },
  created() {
    this.initTeacherOptions()
  },
}
</script>

<template>
  <el-dialog title="新课程添加" v-model="flag">
    {{ courseData }}
    <el-form :rules="courseRules" :model="courseData" label-width="80px" ref="from">
      <el-form-item label="课程年级" prop="course_grade"
        ><el-input type="number" v-model="courseData.course_grade"
      /></el-form-item>
      <el-form-item label="课程名称" prop="course_name"
        ><el-input v-model="courseData.course_name"
      /></el-form-item>
      <el-form-item label="课程学分" prop="course_credit"
        ><el-input type="number" v-model="courseData.course_credit"
      /></el-form-item>
      <el-form-item label="授课老师" prop="course_teacher_id">
        <el-select
          placeholder="请选择"
          filterable
          remote
          v-model="courseData.course_teacher_id"
          :remote-method="remoteMethod"
        >
          <el-option
            v-for="(s, i) in teachers"
            :label="s.count_text"
            :value="s.teacher_id"
            :key="s.teacher_id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="上课时间" prop="course_time">
        <div class="time-input">
          <el-select v-model="courseTime.week">
            <el-option v-for="(z, i) in weeks" :label="z" :value="i"></el-option>
          </el-select>
          <el-select v-model="courseTime.start">
            <el-option v-for="(s, i) in 10" :label="`第${s}节`" :value="i"></el-option>
          </el-select>
          <el-select v-model="courseTime.end">
            <el-option v-for="(s, i) in 4" :label="`共${s}节`" :value="s"></el-option>
          </el-select>
        </div>
      </el-form-item>
      <el-form-item label="上课地点" prop="course_location"
        ><el-input v-model="courseData.course_location"
      /></el-form-item>
      <el-form-item label="座位数 " prop="course_max_size">
        <el-input type="number" v-model="courseData.course_max_size"
      /></el-form-item>
      <el-form-item label="考试时间" prop="course_exam_date"
        ><el-date-picker class="examTime" v-model="courseData.course_exam_date"></el-date-picker
      ></el-form-item>
      <el-form-item label="考试地点" prop="course_exam_location"
        ><el-input v-model="courseData.course_exam_location"
      /></el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="flag = false">取消</el-button>
      <el-button type="primary" @click="addNewCourse">新增</el-button>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss">
:deep(.examTime) {
  width: 100%;
}
.time-input {
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
  gap: 10px;
  & > .el-select {
    flex: 1;
  }
}
</style>
